@extends('Admin.layout.layout')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>店铺列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <form action="{{asset('/foradmin/shop')}}" method="GET">
                                    {{csrf_field()}}
                                    <!-- <a href="/demo/details" class="btn btn-sm btn-primary ">添加</a> -->
                                    <button type="submit" class="btn btn-sm btn-primary fr"> 搜索</button>
                                    <div class="input-group fr10">
                                        <select  title="" name="sp_status" class="input-sm form-control" style="margin-right: 10px;padding: 0;">
                                            <option value="">店铺状态</option>
                                            <option value="1" @if($search_params['sp_status'] == '1' )selected="selected" @endif>正常</option>
                                            <option value="0" @if($search_params['sp_status'] == '0' )selected="selected" @endif>禁用</option>
                                        </select>
                                    </div>
                                    <div class="input-group fr10">
                                        <input placeholder="结束日期" name="sp_created[end]" value="{{array_get($search_params,'sp_created.end')}}" class="input-sm form-control layer-date" id="end">
                                    </div>
                                    <div class="input-group fr10">
                                        <input placeholder="开始日期" name="sp_created[start]" value="{{array_get($search_params,'sp_created.start')}}" class="input-sm form-control layer-date" id="start">
                                    </div>
                                    <div class="input-group fr10">
                                        <input type="text" placeholder="企业名称" name="sp_name" value="{{array_get($search_params,'sp_name')}}" class="input-sm form-control">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                            <thead>
                                <tr>
                                    <th width="15">
                                        <input type="checkbox" class="checkall" name="selectall" />
                                    </th>
                                    <th>ID</th>
                                    <th>店铺名称</th>
                                    <th class="center">类型</th>
                                    <th class="center">商品数量(上架/总数)</th>
                                    <th class="center">联系人</th>
                                    <th>所属企业</th>
                                    <th class="center">动态评分</th>
                                    <th class="center">等级</th>
                                    <th class="center">模板</th>
                                    <th class="center">状态</th>
                                    <th class="center">创立时间</th>
                                    <th class="center">商城首页推荐</th>
                                    <th class="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($list)>0)
                                    @foreach($list  as $key => $obj)
                                        <tr class="gradeX">
                                            <th>
                                                <input type="checkbox" class="checkall" name="checkBox" />
                                            </th>
                                            <td>{{$obj['sp_id']}}</td>
                                            <td>{{$obj['sp_name']}}</td>
                                            <td class="center">
                                                <?php /*@foreach($obj['sp_type_id_type'] as $k =>$v)
                                                {{$v['tp_name']}}
                                                @if(count($obj['sp_type_id_type'])-$k>1)
                                                     |
                                                @endif
                                                @endforeach */?>
                                            </td>
                                            {{--<td class="center"> {{count(array_get($obj,'product'))}} </td>--}}
                                            <td class="center"> {{array_get($obj,'products_num.onsale')}} /  {{array_get($obj,'products_num.all')}}</td>
                                            <td> {{array_get($obj,'company_material.contact_person')}} - {{array_get($obj,'company_material.contact_mobile')}} </td>
                                            <td> {{array_get($obj,'company.company_name')}} </td>
                                            <td class="center">{{$obj['sp_score']}}</td>
                                            <td class="center">{{array_get($obj,'shop_level.lv_txt_tag')}}</td>
                                            <td class="center">默认</td>
                                            <td class="center">{{$obj['sp_status']==1?'正常':'禁用'}}</td>
                                            <td class="center">{{$obj['sp_created']}}</td>
                                            <td class="center"  id="recommend_text_{{$obj['sp_id']}}">
                                                @if($obj['is_recommend']==1)
                                                    <a href="javascript:void 0;" onclick="recommend({{$obj['sp_id'].',2'}})">取消推荐</a>
                                                @else
                                                    <a href="javascript:void 0;" onclick="recommend({{$obj['sp_id'].',1'}})">推荐</a>
                                                @endif
                                            </td>
                                            <td class="center">
                                                <a class="btn-xs btn-primary "  data-toggle="modal" data-target="#editModal"  data-name="{{$obj['sp_name']}}" data-id="{{$obj['sp_id']}}" data-status="{{$obj['sp_status']}}" data-banners="{{json_encode($obj['shop_banners'])}}" data-time="{{$obj['sp_created']}}" data-description="{{$obj['description']}}">编辑</a>
                                                {{--<a class="btn-xs btn-primary" data-toggle="modal" data-target="#checkModel" data-name="{{$obj['sp_name']}}" data-id="{{$obj['sp_id']}}" data-status="{{$obj['sp_status']}}" data-banners="{{json_encode($obj['shop_banners'])}}" data-time="{{$obj['sp_created']}}" data-description="{{$obj['description']}}">查看</a>--}}
                                                <a class="btn-xs btn-primary" title="点击进入店铺首页" href="{{url('shop/index')}}/{{$obj['sp_id']}}" target="_blank">查看</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr class="no-records-found center"><td colspan="8">没有找到匹配的记录</td></tr>
                                @endif
                            </tbody>
                        </table>
                        <div class="row">
                            @include('Admin.common.paginate', ['page' => $page])

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" value="" name="banners" id="banners">
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        店铺编辑
                    </h4>
                </div>
                <form class="form-horizontal m-t" id="editForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">公司名称：</label>
                        <div class="col-sm-8">
                            <p class="form-control-static" id="name">公司名称</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">创立时间：</label>
                        <div class="col-sm-8">
                            <p class="form-control-static" id="foundingTime">2018-1-12 12:12:10</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-8">
                            <div class="radiolist i-checks">
                                <label><input type="radio" name="status" value="1"/>正常</label>
                                <label><inpuT type="radio" name="status" value="0"/>停止</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">店铺网址：</label>
                        <div class="col-sm-9">
                            <div class="col-sm-12">
                                <p class="form-control-static" id="website">http://example.ejing365.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">店铺banner：</label>
                        <div class="col-sm-4">
                            <div class="bannerlist">
                                <!-- <div class="col-sm-12 control-label banner_box">
                                    <img style="width: 100%;" src="{{asset('img/p1.jpg')}}">
                                </div>
                                <div class="col-sm-12 control-label banner_box">
                                    <img style="width: 100%;" src="{{asset('img/p1.jpg')}}">
                                </div>-->
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">推荐描述：</label>
                        <div class="col-sm-7">
                            <input type="text" name="description" value="" class="input-sm form-control" placeholder="推荐描述不超过15个字符" maxlength="15" title="推荐描述">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="sp_id" id="sp_id">

                    <button type="button" class="btn btn-primary" id="btn_submit">
                        确定
                    </button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" >取消
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>

<div class="modal fade" id="checkModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">查看店铺信息</h4>
                </div>
                <form class="form-horizontal m-t" id="editForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">公司名称：</label>
                        <div class="col-sm-8">
                            <p class="form-control-static name" >公司名称</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">创立时间：</label>
                        <div class="col-sm-8">
                            <p class="form-control-static foundingTime" >2018-1-12 12:12:10</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-8">
                            <div class="radiolist i-checks">
                                <p class="form-control-static status" ></p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">店铺网址：</label>
                        <div class="col-sm-9">
                            <div class="col-sm-12">
                                <p class="form-control-static website" >http://example.ejing365.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">店铺banner：</label>
                        <div class="col-sm-4">
                            <div class="bannerlist">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">店铺banner：</label>
                        <div class="col-sm-4">
                            <p class="form-control-static description"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" >关闭
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>

<!-- <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        商铺编辑
                    </h4>
                </div>
                <form class="form-horizontal m-t" id="editForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">公司名称：</label>
                        <div class="col-sm-8">
                            <input id="name" name="name" class="form-control" type="text" placeholder="公司名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">创立时间：</label>
                        <div class="col-sm-8">
                            <input class="form-control layer-date foundingTime" id="foundingTime" placeholder="创立时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-8">
                            <div class="radiolist i-checks">
                                <label><input type="radio" name="status" value="1"/>正常</label>
                                <label><inpuT type="radio" name="status" value="0"/>停止</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">商铺网址：</label>
                        <div class="col-sm-9">
                            <div class="col-sm-12">
                                <div class="input-group m-b">
                                    <span class="input-group-btn"><div class="btn btn-white">http://</div></span>
                                    <input id="website" name="website" class="form-control" type="text" placeholder="eg:ejing365.com ." >
                                    <span class="input-group-btn"><div class="btn btn-white">.ejing365.com</div></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">商铺banner：</label>
                        <div class="col-sm-4">
                            <div class="bannerlist">
                                <div class="col-sm-12 control-label banner_box">
                                    <img style="width: 100%;" src="{{asset('img/p1.jpg')}}">
                                    <input type="hidden" name="img[]" value="">
                                    <div class="img_del btn btn-default btn-xs">删除</div>
                                </div>
                                <div class="col-sm-12 control-label banner_box">
                                    <img style="width: 100%;" src="{{asset('img/p1.jpg')}}">
                                    <input type="hidden" name="img[]" value="">
                                    <div class="img_del btn btn-default btn-xs">删除</div>
                                </div>
                            </div>
                            <div class="col-sm-12 control-label">
                                <div class="btn-group fl">
                                    <label title="上传图片" for="inputImage" class="btn btn-primary">
                                        <input type="file" accept="image/*" name="" id="inputImage" class="hide"> 上传图片
                                        <input type="hidden"  name="banner[]">
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btn_submit">
                        确定
                    </button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" >取消
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>--->
    <script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
    <script src="{{asset('js/plugins/layer/laydate/laydate.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>

    <script>
        var icon = "<i class='fa fa-times-circle'></i> ";
        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: '2000-01-01 00:00:00', //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);


        //商城首页推荐
        function recommend(id,recommend){
            $.ajax({
                url: '{{Request::url()}}/recommend/'+id,
                type: 'put',
                dataType: 'json',
                data: {'is_recommend' : recommend},
                success: function (data) {
                    if (0 == data.code) {
                        layer.alert("操作成功", {
                            icon: 1
                        }, function (index) {
                            if(recommend==1){
                                var str="<a href=\"javascript:void 0;\" onclick=\"recommend("+id+",2)\">取消推荐</a>";
                                $("#recommend_text_"+id).html(str);
                            }else{
                                var str="<a href=\"javascript:void 0;\" onclick=\"recommend("+id+",1)\">推荐</a>";
                                $("#recommend_text_"+id).html(str);
                            }
                            layer.close(index);
                        });
                    } else {
                        layer.alert(data.message, {
                            icon: 2
                        });
                    }
                }
            });
        }

        //上传图片
         $('#inputImage').change(function(img){
            var files =  this.files[0];
            var formFile = new FormData();
            formFile.append("image", files);
            $.ajax({
                url: "/uploads/images",
                type: 'post',
                data: formFile,
                dataType:"json",
                contentType: false,
                processData: false,
                success: function(data) {
                    var html = '<div class="col-sm-12 control-label banner_box">'
                            +'<img style="width: 100%;" src="'+data.path+'">'
                            +'<input type="hidden" name="img[]" value="'+data.path+'">'
                            +'<div class="img_del btn btn-default btn-xs">删除</div>'
                        +'</div>';
                    $('.bannerlist').append(html)
                },
                error: function(data) {
                    console.log("error");
                }
            });
        });



        // AJAX 修改店铺的禁用状态
        $(document).on("click","#btn_submit",function(){
            var post_id = $('input[name="sp_id"]').val();
            var status  = $('input[name="status"]:checked').val();
            var description  = $('input[name="description"]').val();
            if (post_id&&status){
                $.ajax({
                    url: "{{Request::url()}}",
                    type: "POST",
                    data: {sp_id: post_id, status: status,description:description},
                    success: function (data) {
                        if(data.code==0){
                            layer.alert(data.message, {
                                icon: 1
                            }, function (index) {
                                location.reload();
                            });
                        }else{
                            layer.alert('修改失败', {
                                icon: 2
                            }, function (index) {
                                location.reload();
                            });
                        }
                    },
                    error: function (error) {
                        layer.alert(error, {
                            icon: 2
                        }, function (index) {
                            layer.close(index);
                        });
                    }
                });
            }else {
                layer.alert('修改失败', {
                    icon: 2
                }, function (index) {
                    location.reload();
                });
            }
        });

        $(document).on("click",".img_del",function(){
            $(this).parent('.banner_box').remove();
        });

        var edit_id = 0;//修改列表的id
        //点击编辑
        $('#editModal').on('show.bs.modal', function (e) {
            $('.bannerlist').html('');// 初始化图片信息
            edit_id = $(e.relatedTarget).attr("data-id"); //编辑时属性的id
            // 公司名称
            var description = $(e.relatedTarget).attr("data-description");
            var name = $(e.relatedTarget).attr("data-name");
            var status = $(e.relatedTarget).attr("data-status");
            var ctime = $(e.relatedTarget).attr("data-time");
            var banners = eval('(' + $(e.relatedTarget).attr("data-banners") + ')');
            $('input:radio[name="status"][value='+status+']').prop("checked",'checked');
            $('#name').html(name);
            $('input[name="sp_id"]').val(edit_id);
            $('input[name="description"]').val(description);
            console.log($('input[name="sp_id"]').val());
            $('#foundingTime').html(ctime);
            var shop_url = window.location.protocol+'//'+window.location.host+'/shop/index/'+edit_id;
            $('#website').html(shop_url);

            var html ='';
            for(var i in banners){
                html += '<div class="col-sm-12 control-label banner_box">'
                        +'<img style="width: 100%;" src="'+banners[i].banner_image+'">'
                        +'</div>';
            }
            $('.bannerlist').append(html);
            return '' ;
            if(edit_id){
                 $.ajax({
                    url: "",
                    type: "get",
                    data: {id : edit_id},
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data) {
                        $("#name").text(data.name);
                        $("#foundingTime").text(data.foundingTime);
                        $("input[name=status][value=" + data.status + "]").attr("checked", true);
                        $("#website").text(data.website);
                        var html ='';
                        for(var i in data.images){
                            html += '<div class="col-sm-12 control-label banner_box">'
                                +'<img style="width: 100%;" src="'+data.images[i].path+'">'
                            +'</div>';
                        }
                        $('.bannerlist').append(html)

                    },
                    error: function () { }
                });
            }
        });

        $("#editForm").validate({
            rules: {
            },
            messages: {
            },
            submitHandler:function(form){
                var name   = $("#name").val();
                var foundingTime  = $("#foundingTime").val();
                var status  = $("input[name=status]:checked").val();
                $.ajax({
                    url : '{{Request::url()}}/'+edit_id+"/edit",
                    type : 'put',
                    dataType : "json",
                    data : {},
                    success : function(data) {
                        if (0 == data.code) {
                            layer.alert("修改成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }
        });

        //点击查看
        $('#checkModel').on('show.bs.modal', function (e) {
            $('.bannerlist').html('');// 初始化图片信息
            edit_id = $(e.relatedTarget).attr("data-id"); //编辑时属性的id
            // 公司名称
            var description = $(e.relatedTarget).attr("data-description");
            var name = $(e.relatedTarget).attr("data-name");
            var status = $(e.relatedTarget).attr("data-status");
            var ctime = $(e.relatedTarget).attr("data-time");
            var banners = eval('(' + $(e.relatedTarget).attr("data-banners") + ')');
            var status_text = (status==1)?'正常':'禁用';
            console.log(status_text);
            $('.status').html(status_text);
            $('.name').html(name);
            $('.description').html(description);
            $('.foundingTime').html(ctime);

            var html ='';
            for(var i in banners){
                html += '<div class="col-sm-12 control-label banner_box">'
                        +'<img style="width: 100%;" src="'+banners[i].banner_image+'">'
                        +'</div>';
            }
            $('.bannerlist').append(html);
        });
    </script>
@endsection